
<template>
    <div>
        <h1>房型显示列表</h1>
        
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>价格</td>
                    
                    <td>是否有窗</td>
                    <td>状态</td>
                    <td>建筑面积</td>
                    <td>入住人数</td>
                    <td>房型风格</td>
                    <td>操作</td>
                </tr>
                <tr v-for="value in list">
                   <td>{{value.houseTypeName}}</td>
                   <td>{{value.price}}</td>
              
                   <td>{{value.isWin==true?"有":"无"}}</td>
                   <td>{{value.state==1?"启用":"禁用"}}</td>
                   <td>{{value.area}}</td>
                   <td>{{value.people}}</td>
                   <td>{{value.hotelName}}</td>
                   <td><input type="button" value="删除" @click="Del(value.id)" >
                       <input type="button" value="启用" v-if="value.state==0" @click="Updatestate(value.id,1)" style="background-color: chartreuse;">
                       <input type="button" value="禁用" v-if="value.state==1" @click="Updatestate(value.id,0)" style="background-color:brown;">
                       <input type="button" value="修改"  @click="Update(value.id)" style="background-color:aqua;">
                </td> 

                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import router from '@/router';
let list:any=ref([]);



onMounted(()=>{
    GetList(); 
})
const Update=(id:any)=>{
    router.push({
        path:'/Update',
        query:{
            id:id
        }
    })
}


const Updatestate=(id:any,state:any)=>{
    console.log(id,state)
    let f=confirm("确认要修改状态吗?")
    axios({
        url:'https://localhost:7058/api/Hotel/UpdateState',
        method:'get',
        params:{
            id:id,
            state:state
        }
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert("修改成功");
            GetList();
        }
        else{
            alert("修改失败")
            return;
        }
    })
    .catch((err)=>{
        console.log(err);
    })
}
const Del=(id:any)=>{
        console.log('id=',id)
       let f=confirm("确认要删除吗?")
       axios({
        url:'https://localhost:7058/api/Hotel/Del',
        method:'get',
        params:{
            id:id,
        }
       })
       .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert("删除成功");
            GetList();
        }
       
       })
       .catch((err)=>{
        console.log(err);
       })
}
const GetList=()=>{
    axios({
        url:'https://localhost:7058/api/Hotel/GetList',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        list.value=res.data
    })
    .catch((err)=>{
        console.log(err)
    })
}
</script>

<style scoped>

</style>    